<template>
  <base-layout
    dialog-title="考勤设置"
    :dialog-visible="settingDialogVisible"
    @dialog-close="settingVisibleChange"
    dialogWidth="60%"
  >
    <template #searchPanel>
      <search-panel
        :addPer="'111'"
        :selectPer="'111'"
        :excelPer="'admin'"
        addTitle="考勤设置"
        @insert="settingVisibleChange(true)"
        @search="search"
        @export="handleDataExport('Attendance','考勤管理')"
        :showSearchButton="true"
        :showAddButton="true"
        :showExportButton="true"
      >
        <job-shop
          v-model="formDate.storeId"
          placeholder="所属门店"
        />
        <role-select
          v-model="formDate.roleId"
          placeholder="职位"
        />
        <el-input
          v-model="formDate.user"
          clearable
          placeholder="员工姓名/联系方式"
          style="width: 200px"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i
            class="el-icon-info"
            title="考勤详情"
            style="cursor: pointer;"
            @click="attendanceDetails(row)"
          ></i>
          <i
            class="el-icon-date"
            title="录入迟到、旷工、早退、忘打卡、加班"
            style="color:red; margin-left: 20px;cursor: pointer"
            @click="addAttendance(row)"
          ></i>
        </template>
      </data-table>
      <detailsDialog ref="detailsDialog" />
      <addDialog ref="addDialog" />
    </template>
    <template #dialog>
      <settingDialog
        :dialog-visible="settingDialogVisible"
        @set-visible="settingVisibleChange"
      />
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import settingDialog from './components/settingDialog.vue'
import detailsDialog from './components/detailsDialog.vue'
import addDialog from './components/addDialog.vue'
import { page } from '@/api/after-sale/personnel/attendance'
export default {
  components: {
    settingDialog,
    detailsDialog,
    addDialog
  },
  mixins: [
    baseMixin({
      findData: page,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '员工姓名', value: 'userName', type: 'text' },
        { name: '员工职位', value: 'userRoleName', type: 'text' },
        { name: '联系方式', value: 'phone', type: 'text' },
        { name: '薪资', value: 'baseSalary', type: 'text' },
        { name: '加班小时', value: 'jb', type: 'text' },
        { name: '忘打卡', value: 'wdk', type: 'text' },
        { name: '本月迟到次数', value: 'cd', type: 'text' },
        { name: '本月早退次数', value: 'zt', type: 'text' },
        { name: '本月旷工次数', value: 'kd', type: 'text' },
        { name: '本月请假次数', value: 'qj', type: 'text' }
      ],
      settingDialogVisible: false,
      formDate: {
        // 门店id
        storeId: '',
        // 职位id
        roleId: '',
        user: ''
      }
    }
  },
  methods: {
    /**
     * @description: 查询
     * @param {*}
     * @return {*}
     */
    search() {
      this.searchOptions = this.formDate
      this.currentPage = 1
      this.setTableData()
    },
    /**
     * @description: 考勤设置弹窗显示/隐藏
     * @param {boolean} visible
     * @return {void}
     */
    settingVisibleChange(visible) {
      this.settingDialogVisible = visible
    },
    /**
     * @description: 展示考勤详情
     * @param {Object} 员工信息
     * @return {viod}
     */
    attendanceDetails(info) {
      this.$refs.detailsDialog.open(info)
    },
    /**
     * @description: 添加考勤
     * @param {Object} 考勤详情
     * @return {viod}
     */
    addAttendance(row) {
      this.$refs.addDialog.open(row.id, this.setTableData)
    },
  }
}
</script>
